<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"
        integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-zh_CN.min.js"></script> -->


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css"
        integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> -->
    <!-- <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css"> -->
    <title>ChatCinema 放映室</title>
</head>

<body>
    <h1 style="margin: 50px 0px 0px 0px;text-align: center;">聊天放映室</h1>
    <div style="text-align: center; margin-top:50px">
        <video controls width="1280" id="video" preload="auto">
            <source src="/video" type="video/mp4">
        </video>
    </div>

    <div style="margin:auto; width: 1285px; margin-top:10px">
        <div class="form-control" id="message_panel" style="height: 250px; width:100%; overflow-y: auto;;">
            <ul id="message_list" style="word-break:break-all; list-style-type: none;">
                
            </ul>
        </div>
        <div style="margin-top: 10px;">
            <input class="form-control" type="text" id="input" placeholder="输入消息..."   style="width: 100%; ">
        </div>
        
    </div>


    <script>
        $(document).ready(function () {
            if (sessionStorage.getItem("userName") == null || sessionStorage.getItem("roomName") == null) {
                sessionStorage.clear();
                location.href="/";
                return false;
            }

            var local_userName = sessionStorage.getItem("userName");
            var local_roomName = sessionStorage.getItem("roomName");



            var urlObject = new URL(window.location.href);
            var searchParams = urlObject.searchParams;
            if (searchParams.get("roomName") != local_roomName) {
                location.href="/cinema?roomName="+local_roomName;
                return false;
            }
            
            var ws = new WebSocket("ws://125.91.106.138:9999/upgrade");
            ws.onopen = function () {
                var mess = {"action": "addUserWebConn", "userName": local_userName, "roomName": local_roomName};
                ws.send(JSON.stringify(mess));
                console.log("连接成功");

                mess = {"action": "getHistory","roomName": local_roomName};
                ws.send(JSON.stringify(mess));

            };

            ws.onmessage = function (msg) {
                console.log(msg);
                data = JSON.parse(msg.data)

                var action = data.action;
                if (action == "chat") {
                    var userName = data.userName;
                    var message = data.message;
                    var message_item = "<li class=\"message_item\">"+ userName+":    "+message+"</li>\n"
                    if (userName == local_userName) {
                        message_item = "<li class=\"message_item_current_user\">"+ local_userName+":    "+message+"</li>\n"
                    }
                    $("#message_list").append(message_item);
                    var message_panel = document.querySelector('#message_panel');
                    message_panel.scrollTop = message_panel.scrollHeight - message_panel.clientHeight;
                }
                else if (action == "getHistory") {
                    var history = data.history;
                    console.log(history);
                    var len = history.length;
                    $("#message_list").find("li").remove();
                    for (var i=len-1; i >=0; i--) {
                        var userName = history[i][0];
                        var message = history[i][1];
                        var message_item = "<li class=\"message_item\">"+ userName+":    "+message+"</li>\n"
                        $("#message_list").append(message_item);
                    }
                    
                    var message_panel = document.querySelector('#message_panel');
                    message_panel.scrollTop = message_panel.scrollHeight - message_panel.clientHeight;
                }

            };

            ws.onclose = function () {
                location.href("/");

            };

            ws.onerror = function () {
                location.href("/");

            };

            $("#input").keyup(function (event) {
                if (event.keyCode == "13"){
                    var text = $("#input").val();
                    $("#input").val("");

                    var mess = { "userName": local_userName, "message": text , "action": "chat", "roomName": local_roomName};
                    if (ws.readyState == 1) {
                        ws.send(JSON.stringify(mess));
                    }
                    
                    
                    return false;
                }
                
            });

            



        });

    </script>

</body>


<style lang="css">
    .website-icon {
        font-size: 27px;
        margin: 35px 5px 12px 12px;
    }

    body {
        margin: 8px;
    }

    .top {
        position: absolute;
        left: 0;
        right: 0;
        height: 72px;
    }
    .chatbox {
        padding-top: 60px;
        width: 900px;
        margin: auto;
    }
    .sidebar {
        position: absolute;
        right: 50px;
        top: 72px;
        bottom: 0;
        width: 400px;
        height: 720px;
    }
    .message_item {
        margin-top: 25px;
        margin-left: 0px;
    }

    .message_item_current_user {
        margin-top: 25px;
        margin-left: 0px;
        color: aqua;
    }
</style>

</html>